<template>
	<view>
		<section>
			<view v-for="(item,li) in userlikes" :key="li" class="userlikes-box">
				<view class="userlikes-box-image">
					<image :src="item.likeimage" mode="" class="userlikes-image"></image>
				</view>
				<view class="userlikes-titles">
					<view class="userlikes-message">
						<view class="userlikes-name">
							{{item.usernamelikes}}
						</view>
						<view class="userlikes-title-date">
							<text class="likes-nate">{{item.likenate}}</text>
							<text class="likes-date">{{item.likesdate}}</text>
						</view>
					</view>
					<view class="private-letter">
						<view class="private-letter-thank" v-show="ThankPicture" @click="clickThankPicture">
							<image :src="item.ThankPicture" mode="" class="thank-picture"></image>
							{{item.privateLetter}}
						</view>
						<view class="private-letter-thank" v-show="qusx">
							<image src="../../static/MessageImg/qusx.png" mode="" class="qusx"></image>
							去私信
						</view>
					</view>
				</view>
				<view class="note-content">
					<image :src="item.nateimage" mode="" class="note-content-image"></image>
				</view>
			</view>
		</section>
		<footer>
			<view class="the-end">
				{{ending}}
			</view>
		</footer>
		<view class="thank-message" v-if="showThankMessage">
			表情已发送
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ThankPicture: true,
				qusx: false,
				showThankMessage: false, // 控制提示框显示
				userlikes: [{
					likeimage: require("../../static/MessageImg/taikongren.png"),
					usernamelikes: "魂天",
					likenate: "赞了你的笔记",
					likesdate: "05-22",
					ThankPicture: require("../../static/MessageImg/ganxie.png"),
					privateLetter: "私信感谢",
					nateimage: require("../../static/MessageImg/taikongren.png")
				}],
				ending: "- THE END -"
			}
		},
		methods: {
			clickThankPicture() {
				this.ThankPicture = false;
				this.qusx = true;
				this.showThankMessage = true; // 显示提示框

				// 一秒后隐藏提示框
				setTimeout(() => {
					this.showThankMessage = false;
				}, 2000);
			}
		}
	}
</script>

<style scoped>
	.userlikes-box {
		width: 100%;
		height: 250rpx;
		/* 	background-color: aquamarine; */
		display: flex;
		border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
		border-top: 1rpx solid rgba(0, 0, 0, 0.1);
	}
    .thank-message {
    		position: fixed;
    		top: 50%;
    		left: 50%;
    		transform: translate(-50%, -50%);
    		background-color: rgba(0, 0, 0, 0.8);
    		color: white;
    		padding: 10px 20px;
			border-radius: 40rpx;
			}
	.userlikes-box-image {
		width: 20%;
		height: 250rpx;
		/* 	background-color: darkmagenta; */
	}

	.userlikes-box-image>.userlikes-image {
		width: 90rpx;
		height: 90rpx;
		object-fit: cover;
		object-position: center;
		border-radius: 50%;
		display: block;
		margin: auto;
		margin-top: 40rpx;
	}

	.userlikes-box>.userlikes-titles {
		width: 60%;
		height: 250rpx;
		/* 		background-color: aqua; */
	}

	.userlikes-box>.userlikes-titles>.userlikes-message {
		width: 100%;
		height: 100rpx;
		/* 	background-color: bisque; */
		margin-top: 40rpx;
	}

	.userlikes-box>.userlikes-titles>.userlikes-message>.userlikes-name {
		width: 100%;
		height: 50rpx;
		/* 	background-color: darkgreen; */
		font-size: 33rpx;
	}

	.userlikes-box>.userlikes-titles>.userlikes-message>.userlikes-title-date {
		width: 100%;
		height: 42rpx;
		/* 	background-color: darkgoldenrod; */
	}

	.userlikes-box>.userlikes-titles>.userlikes-message>.userlikes-title-date>.likes-nate {
		font-size: 24rpx;
		line-height: 42rpx;
		/* 	background-color: fuchsia; */
	}

	.userlikes-box>.userlikes-titles>.userlikes-message>.userlikes-title-date>.likes-date {
		font-size: 24rpx;
		line-height: 42rpx;
		margin-left: 20rpx;
		/* background-color: fuchsia; */
	}

	.userlikes-box>.userlikes-titles>.private-letter {
		width: 100%;
		height: 110rpx;
		/*   background-color: antiquewhite;	 */
		display: flex;
		align-items: center;
	}

	.userlikes-box>.userlikes-titles>.private-letter>.private-letter-thank {
		width: 190rpx;
		height: 50rpx;
		background-color: rgb(235, 235, 246);
		border-radius: 30rpx;
		font-size: 28rpx;
		text-align: center;
		line-height: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.thank-picture {
		width: 50rpx;
		height: 50rpx;
	}

	.qusx {
		width: 30rpx;
		height: 30rpx;
		margin-right: 20rpx;
	}

	.userlikes-box>.note-content {
		width: 20%;
		height: 250rpx;
		/* 	background-color: brown; */
	}

	.userlikes-box>.note-content>.note-content-image {
		width: 100rpx;
		height: 100rpx;
		margin-top: 40rpx;
		object-fit: cover;
		object-position: center;
	}

	.the-end {
		width: 100%;
		height: 100rpx;
		/* 	background-color: aqua; */
		text-align: center;
		line-height: 100rpx;
		font-size: 30rpx;
		color: rgba(0, 0, 0, 0.3);
	}
</style>